.page {
  --bc: var(--el-border-color-lighter);
  --size: 50px;
}

.tools {
  color: var(--el-text-color-primary);
  width: 240px;
  border-right: 2px solid var(--el-border-color);
  background-color: var(--el-bg-color);

  .operate {
    padding: 6px;
  }
  .upload {
    margin-bottom: 10px;
  }
  .item {
    display: flex;
    margin-top: 6px;
    align-items: center;
    .name {
      font-size: 14px;
      white-space: nowrap;
    }
  }
}

.textarea {
  width: 100%;
  textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: 1px solid #ddd;
    outline: none;
  }
}

.wrapper {
  flex: 1;
  position: relative;
  .device-info {
    top: 5px;
    z-index: 1003;
    position: absolute;
  }
  .device-info {
    right: 5px;
    min-width: 220px;
    max-width: 320px;
    border-left: 1px solid var(--el-border-color);
    border-right: 1px solid var(--el-border-color);
    border-radius: 4px;
  }
}

:global {
  :local(.page) {
    --el-fill-color-blank: var(--el-bg-color);
    .z-drag__move {
      border: 1px solid var(--bc);
      background-image: repeating-linear-gradient(
          0deg,
          var(--bc) 0,
          var(--bc) 1px,
          transparent 1px,
          transparent
        ),
        repeating-linear-gradient(90deg, var(--bc) 0, var(--bc) 1px, transparent 1px, transparent);
      background-size: var(--size) var(--size);
    }
    .el-form-item--small {
      margin-bottom: 8px;
    }
    .e-drag.drop-over {
      box-shadow: inset 0 0 15px var(--el-text-color-primary);
    }
  }
}
